<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/9
  Time: 8:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用 layui</title>
    <!-- 引入 layui.css -->
    <%--    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/css/layui.css?t=<%=Math.random()%>"/>--%>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>

<!--要渲染的数据表格-->
<table id="stu" lay-filter="stu"></table>

<!--弹出表单-->
<form class="layui-form" action="" style="display: none;margin:10px" id="stuFrm" lay-filter="stuFrm">
    <!--学生编号，修改的时候，需要传这个值-->
    <input type="hidden" id="studentId" name="studentId"/>
    <!--设置提交的地址-->
    <input type="hidden" id="action" name="action">

    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name"  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">班级</label>
        <div class="layui-input-block">
            <select name="classId" id="classId" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-block">
            <select name="province" lay-verify="required">
                <option value="">请选择</option>
                <option value="河南">河南</option>
                <option value="河北">河北</option>
                <option value="山东">山东</option>
                <option value="湖北">湖北</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <div class="layui-input-block">
            <input type="text" name="birthday" id="birthday"  lay-verify="required" placeholder="请输入生日" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit lay-filter="stuBtnSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<!--定义表格工具条-->
<script type="text/html" id="stuBar">
    <div class="layui-btn-container">
        <!--lay-event:用于设置一个按钮的特定事件，事件名字自己定义-->
        <button type="button" class="layui-btn" lay-event="stuAdd">添加</button>
        <button type="button" class="layui-btn layui-btn-danger" lay-event="stuBatchDel">批量删除</button>
    </div>
</script>
<script type="text/html" id="stuRowBar">
    <div  class="layui-btn-container">
        <!--lay-event:用于设置一个按钮的特定事件，事件名字自己定义-->
        <button type="button" class="layui-btn layui-btn-sm" lay-event="stuEdit">编辑</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="stuDel">删除</button>
    </div>
</script>

<%--<script type="text/javascript" src="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/layui.js?t=<%=Math.random()%>"></script>--%>
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>
    layui.use(['table','layer','laydate','form'], function(){
        var table = layui.table //表格组件
            ,layer=layui.layer  //弹出层
            ,laydate=layui.laydate //日期
            ,form=layui.form //表单
            ,$ = layui.$; //jq

        //渲染日期框
        laydate.render({
            elem: "#birthday"
        })

        //加载班级下拉框
        loadClassInfo();

        //渲染表格数据
        table.render({
            elem: '#stu' //渲染的目标元素
            ,url: '${pageContext.request.contextPath}/StudentServlet/queryForLayUI' //发送请求获取数据
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar:"#stuBar" //设置表格工具条
            ,defaultToolbar: ['filter']
            ,width:1000
            ,page:true //启用分页
            ,limit:20 //每页条数
            ,limits:[5,10,20,30] //可选条数
            ,cols: [[  //表格列的定义
                {title:"全选",type:"checkbox"}
                ,{field:'studentId', width:80, title: '学号', sort: true}
                ,{field:'name', width:80, title: '姓名'}
                ,{field:'sex', width:80, title: '性别', sort: true,templet:function (d){
                        //console.log(d);
                        if(d.sex=="男")
                            return "<font color='blue'>男</font>";
                        else
                            return "<font color='red'>女</font>";
                    }}
                ,{field:'province', width:80, title: '省份'}
                ,{field:'birthday', title: '生日', width: '30%', width: 120} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'classId', title: '班级编号', hide:true}
                ,{field:'className', title: '班级名字',with:80, sort: true}
                ,{title:"操作",fixed:"right",toolbar:"#stuRowBar"}
            ]]
        });

        //通过table组件监听表格头部工具条触发的事件
        //toolbar(stu):表示table组件要监听stu(lay-filter)这个表格的工具条事件
        //obj:当工具条中的按钮，触发事件时，layui会将事件信息封装为对象，传入到这个参数中
        table.on("toolbar(stu)",function (obj){
            console.log(obj);
            //根据触发的事件做特定处理
            switch (obj.event){
                case "stuAdd":
                    //弹出表单
                    $("#action").val("${pageContext.request.contextPath}/StudentServlet/add");
                    showStuFrm();
                    break;
                case "stuBatchDel":
                    //点击批量删除，获取当前选中行的信息
                    var checkStatus = table.checkStatus('stu'); //idTest 即为基础参数 id 对应的值
                    //输出选中行对象属性
                    //console.log(checkStatus);
                    //console.log(checkStatus.data) //获取选中行的数据
                    //console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
                    //console.log(checkStatus.isAll ) //表格是否全选
                    //判断当前是否有选中行
                    if(checkStatus.data.length==0){
                        layer.msg("请先选中一行");
                        return;
                    }
                    var ids = [];
                    for(var i=0;i<checkStatus.data.length;i++){
                        ids.push(checkStatus.data[i].studentId);
                    }
                    //拼接数组中的id: 3,4,5,6
                    ids = ids.join(",");
                    delStu(ids);
                    break;
            }
        })

        //通过table组件，监听行工具条事件
        table.on("tool(stu)",function (obj){
            console.log(obj);
            //判断点击按钮的事件
            switch (obj.event){
                case "stuEdit":
                    //弹出表单
                    $("#action").val("${pageContext.request.contextPath}/StudentServlet/update");
                    showStuFrm();
                    //为表单设值
                    form.val("stuFrm",obj.data);
                    break;
                case "stuDel":
                    layer.confirm("确定要删除么?",function (index){
                        var ids = obj.data.studentId;
                        delStu(ids);
                        //关闭确认框
                        layer.close(index);
                    })
                    break;
            }
        })



        //绑定表单中，提交按钮的提交事件
        form.on("submit(stuBtnSubmit)",function (obj){
            console.log(obj);
            $.ajax({
                url:$("#action").val(),
                type:"post",
                data:obj.field, //表单数据
                dataType:"json",
                success:function (res){
                    if(res.code==0){
                        layer.msg("添加成功",{icon:6});
                        //关闭表单
                        layer.close(stuFrmIndex);
                        //表单重置
                        $("#stuFrm")[0].reset();
                        //刷新表格
                        table.reload('stu', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }else{
                        layer.msg("添加失败",{icon:5});
                    }
                }
            })
        })

        //删除学生
        function delStu(ids){
            $.ajax({
                url:"${pageContext.request.contextPath}/StudentServlet/del",
                data:{ids:ids},
                type:"post",
                dataType:"json",
                success:function (res){
                    if(res.code==0){
                        layer.msg("删除成功!",{icon:6});
                        //重新加载表格
                        //刷新表格
                        table.reload('stu', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }else{
                        layer.msg("删除失败!",{icon:5})
                    }
                }
            })
        }

        //加载班级数据
        function loadClassInfo(){
            $.ajax({
                url:"${pageContext.request.contextPath}/ClassInfoServlet/query",
                type: "get",
                dataType:"json",
                success:function (res){
                    console.log(res);
                    //循环数据，将班级添加到下拉框中
                    for(var i=0;i<res.data.length;i++){
                        var cls = res.data[i];
                        $("#classId").append("<option value='"+cls.classId+"'>"+cls.className+"</option>")
                    }

                    //重新渲染下拉框
                    form.render('select')
                }
            })
        }

        var stuFrmIndex;
        //定义函数弹出学生表单
        function  showStuFrm(){
            //页面层
            stuFrmIndex=layer.open({
                type: 1,
                area: ['600px',"400px"],
                content: $('#stuFrm')   //弹出页面元素
            });
        }
    });
</script>
</body>
</html>

